<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>麦咚网购</title>
    <link rel="stylesheet" href="./assets/mui/css/mui.css">
    <link rel="stylesheet" href="./assets/fontAwesome/css/font-awesome.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/product.css">
</head>

<body>
    <!-- 头部 -->
    <header id="header" class="mui-bar mui-bar-nav">
        <h1 class="mui-title">商品详情</h1>
        <a class="fa h_left fa-arrow-left" href="./searchList.html"></a>
        <a class="fa h_right fa-home" href="./searchList.html"></a>
    </header>
    <!-- 内容 -->
    <div class="view">
        <div class="content">

        </div>
    </div>
    <!-- 底部工具栏 -->
    <div class="footer_tool">
        <span class="fa fa-cart-plus"></span>
        <a href="javascript:;" class="add_cart">加入购物车</a>
        <a href="javascript:;" class="buy_now">立即购买</a>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <a href="./index.html" class="active">
            <div class="fa fa-home"></div>
            <p>首页</p>
        </a>
        <a href="./category.html">
            <div class="fa fa-bars"></div>
            <p>分类</p>
        </a>
        <a href="./cart.html">
            <div class="fa fa-cart-plus"></div>
            <p>购物车</p>
        </a>
        <a href="javascript:;">
            <div class="fa fa-user"></div>
            <p>会员中心</p>
        </a>
    </div>
</body>
<script src="./assets/zepto/zepto.js"></script>
<script src="./assets/mui/js/mui.js"></script>
<script src="./js/common.js"></script>
<script src="./js/product.js"></script>
<script src="./assets/arttemplate/template-web.js"></script>
<script type="text/template" id="conTemp">
    <div class="product_slides">
        <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="{{pic[pic.length-1].picAddr}}" />
                    </a>
                </div>
                {{each pic value index}}
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="{{value.picAddr}}" />
                    </a>
                </div>
                {{/each}}
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="{{pic[0].picAddr}}" />
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                {{each pic value index}} {{if index==0}}
                <div class="mui-indicator mui-active"></div>
                {{/if}} {{if index!=0}}
                <div class="mui-indicator"></div>
                {{/if}} {{/each}}
            </div>
        </div>
    </div>
    <div class="product_name">
        {{proName}}
    </div>
    <div class="product_price">
        价格:
        <span class="new_price">¥{{price}}</span>
        <del>¥{{oldPrice}}</del>
    </div>
    <div class="product_size">
        尺码: {{each sizeArr value}}
        <span class="pro_size">{{value}}</span> {{/each}}
    </div>
    <div class="product_num">
        数量:&nbsp;
        <div class="mui-numbox" id="numbox_demo1" data-numbox-step="1" data-numbox-min="1" data-numbox-max="{{num}}">
            <button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
            <input class="num_val mui-input-numbox" type="number">
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
        &nbsp;剩余:&nbsp;{{num}}&nbsp;件
    </div>
</script>

</html>